<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <title>Your Application Name</title>
    <!-- application stylesheet will go here -->
    <!-- dynamically apply native visual theme according to the browser user agent -->
    <script type="text/javascript" src="js/dojolib/1.8.8/dojox/mobile/deviceTheme.js"></script>
    <!-- dojo configuration options -->
    <script type="text/javascript">
        dojoConfig = {
            async: true,
            parseOnLoad: false
        };
    </script>
    <!-- dojo bootstrap -->
    <script type="text/javascript" src="js/dojolib/1.8.8/dojo/dojo.js"></script>
    <!-- dojo application code -->
    <script type="text/javascript">
        require([
            "dojox/mobile/parser",
            "dojox/mobile/compat",
            "dojox/mobile/View",
            "dojox/mobile/Heading",
            "dojox/mobile/RoundRectList",
            "dojox/mobile/RoundRectCategory",
            "dojox/mobile/ListItem",
            "dojox/mobile/Switch",
            "dojo/domReady!"
        ], function (parser) {
            // now parse the page for widgets
            parser.parse();
        });
    </script>
</head>
<body style="visibility:hidden;">
<!-- application will go here -->

<!-- the view or "page"; select it as the "home" screen -->
<div id="settings" data-dojo-type="dojox/mobile/View" data-dojo-props="selected:true">
    <!-- a sample heading -->
    <h1 data-dojo-type="dojox/mobile/Heading">"Homepage" View</h1>
    <!-- a rounded rectangle list container -->
    <ul data-dojo-type="dojox/mobile/RoundRectList">
        <!-- list item with an icon containing a switch -->
        <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="icon:'images/icon-1.png'">Airplane Mode
            <!-- the switch -->
            <div data-dojo-type="dojox/mobile/Switch"></div>
        </li>
        <!-- list item with an icon that slides this view away and then loads another page -->
        <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="icon:'images/icon-2.png', rightText:'mac'">Wi-Fi</li>
        <!-- list item with an icon that slides to a view called "general" -->
        <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="icon:'images/icon-3.png', rightText:'AcmePhone', moveTo:'general'">Carrier</li>
    </ul>
</div>

<!-- The "General" sub-page -->
<div id="general" data-dojo-type="dojox/mobile/View">
    <!-- a sample heading -->
    <h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props="back:'Settings', moveTo:'settings'">General View</h1>
    <!-- a rounded rectangle list container -->
    <ul data-dojo-type="dojox/mobile/RoundRectList">
        <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="moveTo:'about'">About</li>
        <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="rightText:'2h 40m', moveTo:'about'">Usage</li>
    </ul>
</div>

<!-- And let's add another view "About" -->
<div id="about" data-dojo-type="dojox/mobile/View">
    <!-- Main view heading -->
    <h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props="back:'General', moveTo:'general'">About</h1>
    <!-- subheading -->
    <h2 data-dojo-type="dojox/mobile/RoundRectCategory">Generic Mobile Device</h2>
    <!-- a rounded rectangle list container -->
    <ul data-dojo-type="dojox/mobile/RoundRectList">
        <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="rightText:'AcmePhone'">Network</li>
        <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="rightText:'AcmePhone'">Line</li>
        <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="rightText:'1024'">Songs</li>
        <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="rightText:'10'">Videos</li>
    </ul>
</div>


</body>
</html>